<template>
    <div>
        <div class="header" @click="centerDialogVisible=true">
            <div style="width: 80%; height: 100%; padding:0 0 0 100px">
                <img src="../../public/mimages/mi1.png" alt="" width="100%" height="100%">
            </div>  
        </div>
        <div class="body">
            <div style="width: 90%; height: 92%; background-color: aliceblue; padding: 45px 0 0 10%; overflow-y:scroll; ">
                <div style="width: 2200px;">
                    <el-row style="width: 2000px; float: left;">
                        <el-col :span="8" v-for="(o, index) in showIphone" :key="index" :offset="index > 0 ? 1: 0" style="width: 12%;">
                            <el-card :body-style="{ padding: '0px',height:'300px'}">
                                <img 
                                :src="o.url" 
                                :fit="index"
                                class="image" 
                                width="100%" 
                                height="70%">
                                <div style="padding: 14px;">
                                    <span>{{ o.name }}</span>
                                    <p style="color: grey">{{ o.price }}  起..</p> 
                                    <p style="color: grey; font-size: 10px">{{ o.introduce }}</p>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <button  class="btn" style="height: 60px;width:140px; margin: 6% 2% 0 0; border: none; background-color: aliceblue;" @click=" httpupto(0)">
                        <i class="el-icon-more-outline" style="font-size: 40px; "></i>
                        <p style="font-size:17px;font-weight:500;">更多相关商品</p>
                    </button>
                </div>
            </div>
        </div>
        <div>
            <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
                <span style="font-size: 15px;">"该商品目前并未完全上架，请点击查看更多相关商品选择您喜欢的商品吧"</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>   
</template>

<script>
import axios from 'axios';
export default{
 name: '',
 data() {
      return {
        centerDialogVisible: false,
        commodityListvalue:{
            index:0,
            id:0
        },
        showIphone:[
            {
                name:"XiaoMi13Pro",
                price:"4999",
                introduce:"第二代骁龙8｜2K OLED 屏幕 | 徕卡专业光学镜头｜徕卡原生双画质120W澎湃秒充",
                url:'./mimages/xiaomi13pro.png'
            },
            {
                name:"XiaoMi13",
                price:"3999",
                introduce:"第二代骁龙8｜徕卡专业光学镜头｜徕卡75mm长焦 | 超窄边屏幕｜67W澎湃秒充",
                url:"./mimages/xiaomi13.png"
            },
            {
                name:"XiaoMi12SPro",
                price:"5099",
                introduce:"骁龙8+ 旗舰处理器 | 徕卡光学镜头 | 徕卡原生双画质 | 小米自研澎湃P1芯片 | 2K AMOLED屏",
                url:"./mimages/xiaomi12spro.png"
            },
            {
                name:"XiaoMi12S",
                price:"3999",
                introduce:"骁龙8+ 旗舰处理器 | 单手可握好手感 | 徕卡光学镜头 | 全场景疾速抓拍| 6.28″AMOLED屏幕",
                url:"./mimages/xiaomi12s.png"
            },
            {
                name:"RedMik50",
                price:"2099",
                introduce:"天玑8100｜67W快充｜5500mAh大电池｜2K超清直屏｜清晰加倍｜VC液冷散热｜OIS光学防抖",
                url:"./mimages/redmik50.png"
            },
            {
                name:"RedMiNote11tPro",
                price:"2099",
                introduce:"天玑8100｜144Hz高配LCD屏幕｜6400万像素｜VC液冷散热",
                url:"./mimages/redminote11tpro.png"
            }
        ]
      };
    },
 components: {},
 methods:{
    httpupto(ins){
        this.commodityListvalue.index = ins
        axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
        this.$router.push('miphone')
                    })
  }
 }
};
</script>

<style scoped lang='less'>
.header{
    background:rgba(0,0,0,0.95);
    height: 400px;
}
.body{
    padding: 20px 0 0 10%;
    text-align: center;
    height: 450px;
    background: linear-gradient(rgba(0,0,0,0.95), rgba(64, 63, 63, 0.95));
    .btn :hover{
        color: orange;
    }
}


</style>